<template>
  <div class="rankBox">
    <div class="rankTitle">
      <p>热门景区排行</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 图表容器 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
// 获取DOM节点
let charts = ref()
onMounted(() => {
  // 一个容器可以同时放多种类型的图形图标
  let mychart = echarts.init(charts.value)
  mychart.setOption({
    // 标题组件
    title: {
      text: '景区排行', // 主标题
      link: 'http://baidu.com',
      left: '50%', // 标题位置
      //   主标题文字样式
      textStyle: {
        color: 'yellowgreen',
        fontSize: 20,
      },
      //   子标题
      subtext: '各大景区',
      //   子标题样式
      subtextStyle: {
        color: 'yellowgreen',
        fontSize: 16,
      },
    },
    //   x\y轴组件
    xAxis: {
      type: 'category', // 图形图标在x轴均匀分布展示
    },
    yAxis: {},
    //   布局组件
    grid: {
      left: 20,
      bottom: 20,
    },
    // 系类:决定显示图形图标是哪一种的
    series: [
      {
        type: 'bar',
        data: [10, 20, 30, 40, 50, 60, 70],
        // 柱状图的文本标签
        label: {
          show: true,
          //   文字的位置
          position: 'insideTop',
          //   文字的颜色
          color: 'yellowgreen',
        },
        //   是否展示背景颜色
        showBackground: true,
        backgroundStyle: {
          // 底部背景的颜色
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'black', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'blue', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        // 柱条的样式
        itemStyle: {
          borderRadius: [15, 15, 0, 0],
          //   柱条的颜色
          color: (data: any) => {
            let arrColor = [
              'red',
              'green',
              'orange',
              'yellow',
              'purple',
              'yellowgreen',
              'hotpink',
            ]
            return arrColor[data.dataIndex]
          },
        },
      },
      {
        type: 'line',
        data: [10, 30, 60, 80, 20, 160, 130],
        smooth: true, // 平滑曲线
      },
    ],
    tooltip: {},
  })
})
</script>

<style scoped lang="scss">
.rankBox {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin: 15px 0px;

  .rankTitle {
    img {
      padding-top: 10px;
    }
    p {
      color: white;
      font-size: 17px;
    }
  }
  .charts {
    height: calc(100% - 30px);
  }
}
</style>
